<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{assets/css/core.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/amazeui.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/menu.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/index.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/admin.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/page/typography.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/page/form.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/component.css}"/>

    <link rel="stylesheet" th:href="@{http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css}">
    <script th:src="@{https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js}"></script>
    <script th:src="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>


    <!-- Favicons -->
    <link rel="icon" th:href="@{img/favicon.png}"/>
    <link rel="apple-touch-icon" th:href="@{img/apple-touch-icon.png}"/>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{lib/bootstrap/css/bootstrap.min.css}"/>

    <!--external css-->
    <link rel="stylesheet" th:href="@{lib/font-awesome/css/font-awesome.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/zabuto_calendar.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{lib/gritter/css/jquery.gritter.css}"/>

    <link rel="stylesheet" th:href="@{css/style.css}"/>
    <link rel="stylesheet" th:href="@{css/style-responsive.css}"/>
    <script th:src="@{lib/chart-master/Chart.js}"></script>


</head>
<body>
<section id="container">
    <!--header start-->
    <header class="header black-bg" th:replace="headBar::myHeadBar">
    </header>
    <!--header end-->

    <!--sidebar start-->
    <aside th:replace="leftSideBar::myLeftBar">
        <div id="sidebar" class="nav-collapse ">
            <!-- sidebar menu start-->
            <ul class="sidebar-menu" id="nav-accordion">
                <p class="centered"><a href="profile.html"><img src="img/ui-sam.jpg" class="img-circle" width="80"></a>
                </p>
                <h5 class="centered">Sam Soffes</h5>
                <li class="mt">
                    <a class="active" href="index.html">
                        <i class="fa fa-dashboard"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;">
                        <i class="fa fa-desktop"></i>
                        <span>UI Elements</span>
                    </a>
                    <ul class="sub">
                        <li><a href="general.html">General</a></li>
                        <li><a href="buttons.html">Buttons</a></li>
                        <li><a href="panels.html">Panels</a></li>
                        <li><a href="font_awesome.html">Font Awesome</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;">
                        <i class="fa fa-cogs"></i>
                        <span>Components</span>
                    </a>
                    <ul class="sub">
                        <li><a href="grids.html">Grids</a></li>
                        <li><a href="calendar.html">Calendar</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="todo_list.html">Todo List</a></li>
                        <li><a href="dropzone.html">Dropzone File Upload</a></li>
                        <li><a href="inline_editor.html">Inline Editor</a></li>
                        <li><a href="file_upload.html">Multiple File Upload</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;">
                        <i class="fa fa-book"></i>
                        <span>Extra Pages</span>
                    </a>
                    <ul class="sub">
                        <li><a href="blank.html">Blank Page</a></li>
                        <li><a href="login.html">Login</a></li>
                        <li><a href="lock_screen.html">Lock Screen</a></li>
                        <li><a href="profile.html">Profile</a></li>
                        <li><a href="invoice.html">Invoice</a></li>
                        <li><a href="pricing_table.html">Pricing Table</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                        <li><a href="404.html">404 Error</a></li>
                        <li><a href="500.html">500 Error</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;">
                        <i class="fa fa-tasks"></i>
                        <span>Forms</span>
                    </a>
                    <ul class="sub">
                        <li><a href="form_component.html">Form Components</a></li>
                        <li><a href="advanced_form_components.html">Advanced Components</a></li>
                        <li><a href="form_validation.html">Form Validation</a></li>
                        <li><a href="contactform.html">Contact Form</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;">
                        <i class="fa fa-th"></i>
                        <span>Data Tables</span>
                    </a>
                    <ul class="sub">
                        <li><a href="basic_table.html">Basic Table</a></li>
                        <li><a href="responsive_table.html">Responsive Table</a></li>
                        <li><a href="advanced_table.html">Advanced Table</a></li>
                    </ul>
                </li>
                <li>
                    <a href="inbox.html">
                        <i class="fa fa-envelope"></i>
                        <span>Mail </span>
                        <span class="label label-theme pull-right mail-info">2</span>
                    </a>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;">
                        <i class=" fa fa-bar-chart-o"></i>
                        <span>Charts</span>
                    </a>
                    <ul class="sub">
                        <li><a href="morris.html">Morris</a></li>
                        <li><a href="chartjs.html">Chartjs</a></li>
                        <li><a href="flot_chart.html">Flot Charts</a></li>
                        <li><a href="xchart.html">xChart</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;">
                        <i class="fa fa-comments-o"></i>
                        <span>Chat Room</span>
                    </a>
                    <ul class="sub">
                        <li><a href="lobby.html">Lobby</a></li>
                        <li><a href="chat_room.html"> Chat Room</a></li>
                    </ul>
                </li>
                <li>
                    <a href="google_maps.html">
                        <i class="fa fa-map-marker"></i>
                        <span>Google Maps </span>
                    </a>
                </li>
            </ul>
            <!-- sidebar menu end-->
        </div>
    </aside>
    <!--sidebar end-->

    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <h3><i class="fa fa-angle-right"></i> 添加用户</h3>
            <!-- BASIC FORM VALIDATION -->
            <div class="row mt">
                <div class="col-lg-12">
                    <!--<h4><i class="fa fa-angle-right"></i> Basic Validations</h4>-->
                    <div class="form-panel">

                        <form role="form" class="form-horizontal style-form">
                            <div class="form-group has-success">
                                <label class="col-lg-2 control-label">用户名：</label><span id="msg"></span>
                                <div class="col-lg-10">
                                    <input type="text" id="doc-vld-name-2" name="username"
                                           oninput="checkName()" placeholder="输入用户名" class="form-control" required/>

                                </div>
                            </div>

                            <div class="form-group has-error">
                                <label class="col-lg-2 control-label">密码:</label>
                                <div class="col-lg-10">
                                    <input type="password" id="password01" name="password" placeholder="输入密码"
                                           class="form-control" required/>
                                </div>
                            </div>

                            <div class="form-group has-warning">
                                <div class="am-form-group">
                                    <label class="am-form-label col-lg-2 control-label">主题权限：</label>
                                    <label class="am-checkbox-inline col-lg-2">
                                        <input type="checkbox" value="add" name="SchemePermission"
                                               style="margin: auto;"> 上传
                                    </label>
                                    <label class="am-checkbox-inline col-lg-2">
                                        <input type="checkbox" value="delete" name="SchemePermission"> 删除
                                    </label>
                                    <label class="am-checkbox-inline col-lg-2">
                                        <input type="checkbox" value="search" name="SchemePermission"> 查看
                                    </label>
                                    <label class="am-checkbox-inline col-lg-2">
                                        <input type="checkbox" value="download" name="SchemePermission"> 下载
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-offset-2 col-lg-10">
                                    <button class="btn btn-theme" id="saveUser" type="button"
                                            style="margin-left: 300px;"
                                            th:onclick="subcfm()">提交
                                    </button>
                                </div>
                            </div>
                        </form>

                    </div>
                    <!-- /form-panel -->
                </div>
                <!-- /col-lg-12 -->
            </div>
            <!-- /row -->


        </section>
        <!-- /wrapper -->
    </section>
    <!-- /MAIN CONTENT -->
    <!--main content end-->

</section>


<!-- navbar -->
<a th:href="@{admin-offcanvas}" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
   data-am-offcanvas="{target: '#admin-offcanvas'}"><!--<i class="fa fa-bars" aria-hidden="true"></i>--></a>

<script type="text/javascript" th:src="@{assets/js/jquery-2.1.0.js}"></script>
<!--<script type="text/javascript" th:src="@{assets/js/app.js}"></script>-->
<script type="text/javascript" th:src="@{assets/js/blockUI.js}"></script>
<!--<script type="text/javascript" th:src="@{assets/js/charts/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{assets/js/charts/indexChart.js}"></script>-->
<script type="text/javascript" th:src="@{assets/js/amazeui.min.js}"></script>
<script type="text/javascript" th:src="@{assets/js/messages_cn.js}"></script>
<script type="text/javascript" th:src="@{assets/js/jquery.validate.min.js}"></script>
<script type="text/javascript" th:src="@{assets/js/jQuery-1.3.2.min.js}"></script>

<!--重名检测-->
<script type="text/javascript" th:inline="javascript">
    function checkName() {
        var inputName = $("#doc-vld-name-2").val();
        if (inputName != null) {
            var URL = [[@{
                /nameCheck}]];
                $.ajax({
                    type: "get",
                    url: URL,
                    data: {name: inputName},
                    success: function (data) {
                        if (0 < parseInt(data)) {
                            $("#saveUser").attr("disabled", true);
                            $("#msg").html(" \"<span style='color:red'>用户名重复！</span>\"");
                        } else {

                            $("#saveUser").attr("disabled", false);
                            $("#msg").html("\"<span style='color:blueviolet'>用户名可用！</span>\"");

                        }
                        console.log(data);
                    }
                });
            }

        }
</script>

<!--添加用户-->
<script type="text/javascript" th:inline="javascript">
    function addUser() {
        var inputName = $("#doc-vld-name-2").val();
        var password = $("#password01").val();
        var v = [];
        $(":checkbox[name='SchemePermission']:checked").each(function () {
            v.push($(this).val());
        });

        if (inputName != null) {
            var URL = [[@{
                /addU}]];
                $.ajax({
                    type: "get",
                    url: URL,
                    data: {
                        username: inputName,
                        password: password,
                        checkValue: v.toString()
                    },
                    success: function (data) {
                        alert("添加成功！");
                        window.location.href = "/user";
                    }
                });
            }

        }
</script>

<!--提交确认-->
<script type="text/javascript" th:inline="javascript">
    function subcfm() {

        var inputName = $("#doc-vld-name-2").val();
        var inputPassword = $("#password01").val();

        if (inputName != "" && inputPassword != "") {
            if (!confirm("确认要提交？")) {
                window.event.returnValue = false;
            } else {
                addUser();
            }
        } else {
            alert("请先将用户名和密码填写完整");
        }
    }

</script>


<script type="text/javascript" th:inline="javascript">
    function pswCheck() {
        var password = $("#password01").val();
        if (password == null || password == " ") {
            $("#saveUser").attr("disabled", true);
        } else {
            $("#saveUser").attr("disabled", false);
        }
    }
</script>

<!--获取头像-->
<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /headPic}]];
            $.ajax({
                type: "get",
                url: URL,
                data: {},
                success: function (data) {
                    console.log(data);
                    $("#headPic").attr("src", "data:image/gif;base64," + data);
                }
            });
        }
    );


</script>


<!--验证登陆者的主题主题上传权限-->

<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /checkPermission}]];
            var add = "上传";
            $.ajax({
                type: "get",
                url: URL,
                data: {
                    action: add
                },
                success: function (data) {
                    console.log(data);
                    if (0 < parseInt(data)) {
                        $("#uploadTheme").show();
                    } else {

                        $("#uploadTheme").hide();
                    }
                }
            });
        }
    )


</script>

<!--验证登陆者的主题主题查看权限-->

<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /checkPermission}]];
            var view = "查看";
            $.ajax({
                type: "get",
                url: URL,
                data: {
                    action: view
                },
                success: function (data) {
                    console.log(data);
                    if (0 < parseInt(data)) {
                        $("#viewTheme").show()
                    } else {

                        $("#viewTheme").hide()
                    }
                }
            });
        }
    )


</script>


<!--验证角色-->
<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /checkRole}]];
            $.ajax({
                type: "get",
                url: URL,
                data: {},
                success: function (data) {
                    console.log(data);
                    if (0 < parseInt(data)) {
                        var url = [[@{
                            /user}]]
                            $("#myUser").html('<a href="' + url + '" >\n' +
                                '                        <i class="fa fa-desktop"></i>\n' +
                                '                        <span >用户管理</span>\n' +
                                '                    </a>');
                            // $("#userManager").show();
                        }
                    else
                        {
                            // $("#userManager").hide();
                        }
                    }
                });
        }
    )


</script>


<!-- js placed at the end of the document so the pages load faster -->
<script th:src="@{lib/jquery/jquery.min.js}"></script>

<script th:src="@{lib/bootstrap/js/bootstrap.js}"></script>
<script class="include" type="text/javascript" th:src="@{lib/jquery.dcjqaccordion.2.7.js}"></script>
<script th:src="@{lib/jquery.scrollTo.min.js}"></script>
<script th:src="@{lib/jquery.nicescroll.js}" type="text/javascript"></script>
<script th:src="@{lib/jquery.sparkline.js}"></script>
<!--common script for all pages-->
<script th:src="@{lib/common-scripts.js}"></script>
<script type="text/javascript" th:src="@{lib/gritter/js/jquery.gritter.js}"></script>
<script type="text/javascript" th:src="@{lib/gritter-conf.js}"></script>
<!--script for this page-->
<script th:src="@{lib/sparkline-chart.js}"></script>
<script th:src="@{lib/zabuto_calendar.js}"></script>


</body>
</html>